<template>
  <article class="dg-art">

      <!-- 标签筛选 -->
      <transition name="slide-down">
        <am-container v-show="open">
          <am-list :static="true">
            <am-list-item v-for="(tag, indexTag) in tags" :key="indexTag">
              <b>{{ tag.main.name }}：</b>
              <span v-for="(item, indexItem) in tag.sub" :key="indexItem"
                style="user-select:none;"
                :class="[ item.isChosen ? 'am-text-danger' : '', 'sub-tag' ]"
                @click="choose(item)">
                {{ item.name }}
              </span>        
            </am-list-item>
          </am-list>
          <a href="javascript:;" class="am-link-muted am-fr am-margin-bottom-xs" @click="clearTags">清空选中标签</a>
        </am-container>
      </transition>

      <am-container>
        <am-row>
          <div class="am-u-sm-9">
            <span>赛事选择：</span>
            <am-select ref="gameSelect" :options="game.list" :placeholder="game.selected" :width="'45%'"></am-select>
            <!-- <select v-model="game.selected" style="appearance: normal;">
              <option v-for="(item, index) in game.list" :key="index"
                :value="item.ID">{{ item.label }}</option>
            </select> -->
          </div>

          <div class="am-u-sm-3 ">
            <div class="dg-hide-741-up" @click="open = !open" >
              筛选&nbsp;<am-icon style="transition: all .5s;" :class="{ 'reversal': open }" size="sm" type="caret-down"></am-icon>
            </div>
          </div>

          <div class="am-u-end"></div>
        </am-row>
      </am-container>
    </article>
</template>

<script>
export default {
  name: 'filter-panel',
  data() {
    return {
      open: true,

      /**
       * 筛选条件
       */
      sortsIndex: 0,
      sorts: [{
        code: '0',
        label: '默认排序',
      }, {
        code: '1',
        label: '点击率',
      }, {
        code: '2',
        label: ' 票数 ',
      }],
      subChoices: [],
      mainChoices: [],
      choices: [],
      inGame: [],
      tags: []
    }
  },
  computed: {
    selectGame() {
      return this.$refs['gameSelect'].selectValue[0] || this.gameID;
    },
    gameID() {
      const tem = this.$route.params.gameID;
      return tem === 'cur' ? this.$store.getters.gameID : tem;
    },
    game() {
      const tem =  {
        selected: '',
        list: []
      }
      tem.list = this.inGame.map(game => {
        return {
          ID: game.ID,
          label: game.name
        }
      });
      if(tem.list.length > 0 && this.gameID !== '') {
        tem.selected = tem.list.find(t => t.ID === +this.gameID).label;
      }
  
      return tem;
    },
    // tags() {// 标签信息
    //   return this.$store.state.tags.map(tag => {
    //     tag.sub.forEach(s => this.$set(s, 'isChosen', false));
    //     return tag;
    //   });
    // }
  },
  methods: {
    ready() {
      // this.init();
      this.loadTagsData();
      //this.loadPreGames();
    },

    init() {
      this.choices = this.tags.map(tag => {
        tag.sub.forEach(s => this.$set(s, 'isChosen', false));
        return {
          mainID: tag.main.id,
          subIDs: []
        }
      });
    },

    /**main父，sub子 */
    choose(item) {// 选中
      // item.isChosen = !item.isChosen;
      this.$set(item, 'isChosen', !item.isChosen);
      this.choices.push(item);
      this.choices = this.choices.filter(i => i.isChosen);
    },
    clearTags() {
      this.init();
    },
    /**标签数据 */
    loadTagsData() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETTAGSDATA, {})
        .then(res => {
          // this.$store.commit('setTags', res.data.data || []);
          this.tags = res.data.data || [];
          this.inGame =  res.data.inGame;
          resolve();
        }).catch(err => {
          this.$message({
            title: '加载标签数据发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    /**加载历届赛事 */
    loadPreGames() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETPREGAMES, {})
        .then(res => {
          this.preGames = res.data.data;
          this.$store.commit('setPreGames', res.data.data);
          resolve();
        }).catch(err => {
          this.$message({
            title: '加载历届大赛发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
  },
  watch: {
  },
  mounted() {
    this.ready();
  }
}
</script>

<style>
</style>